<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div#outer {
    width: 400px;
    height: 400px;
    background-color: gray;
    
}

div#box {
    width: 200px;
    height: 800px;
    background-color: pink;
}
</style>
</head>
<body>
<div id="outer">
    <div id="box"></div>
</div>
<script>
box.onmouseenter = function (){
    console.log("box... enter");
    box.style.backgroundColor = "red";
}
box.onmouseleave = function (){
    console.log("box... leave");
    box.style.backgroundColor = "";
}

outer.onmouseenter = function (){
    console.log("outer... enter 事件");
}
outer.onmouseleave = function (){
    console.log("outer... leave 事件");
}
</script>
</body>
</html>